<template>
  <div
    v-loading="!($refs['wx-upload-button'] ? $refs['wx-upload-button'].uploadFinsh : true)"
    :element-loading-text="`文件上传中，进度为${$refs['wx-upload-button'] ? $refs['wx-upload-button'].percent : 0}%`"
    class="file-upload"
  >
    <wx-tables
      :table-height-fixed="false"
      :pagination="pagination"
      :columns="reColumns"
      :data-source="dataSource"
      :loading="loading"
      :total="total"
      :size.sync="size"
      :page.sync="page"
    >
      <!-- tools -->
      <template v-if="!isView" #tools>
        <wx-upload-button ref="wx-upload-button" @upload-succ="handleActionUploadSuccess" />
        <el-button class="table-btn" style="margin-left: 10px;" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>
      </template>
      <template v-slot:order_id="{ $index }">
        <span>{{ $index + 1 }}</span>
      </template>
      <template v-slot:file_name="{ row }">
        <div class="file-names">
          <el-link
            v-for="(fileItem, innerIndex) of row.file_name.split(',')"
            :key="innerIndex"
            class="file-item"
            type="primary"
            @click.native="() => downFile(`auditFile/${fileItem}`, 'public/')"
          >
            {{ fileItem.indexOf('_') !== -1
              ? fileItem.slice(fileItem.indexOf('_') + 1) : fileItem }}
          </el-link>
        </div>
      </template>
      <template v-slot:oper="record">
        <div class="oper-box">
          <el-popconfirm
            :ref="`popover-${record.$index}`"
            title="确定删除当前所选项吗？"
            @confirm="handleDelByKey(record.row.id)"
          >
            <el-link slot="reference" type="danger">删除</el-link>
          </el-popconfirm>
        </div>
      </template>
    </wx-tables>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import WxTables from '../WxTables'
import TableMixins from '../WxTables/mixins'
import { post, downFile } from '@/utils/request'
import WxUploadButton from './Button'
export default {
  name: 'WxUpload',
  components: { WxTables, WxUploadButton },
  mixins: [TableMixins],
  props: {
    fTable: {
      type: String,
      default: ''
    },
    fId: {
      type: [String, Number],
      default: ''
    },
    isView: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      markId: 'enclosure_id',
      columns: [
        { dataIndex: 'order_id', label: '序号', slots: true, config: { width: 100 }},
        { dataIndex: 'file_name', label: '文件', slots: true },
        { dataIndex: 'created_at', label: '上传时间' },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      api: '/api/adminPortal/enclosure/getListByCon',
      findApi: '/api/adminPortal/enclosure/getById',
      baseApi: '/api/adminPortal/enclosure/',
      pagination: false,
      firstLoad: false,
      searchForm: {}
    }
  },
  computed: {
    headers() {
      return { Authorization: getToken() }
    },
    action() {
      return process.env.VUE_APP_BASE_API + 'api/adminPortal/uploadFile'
    },
    reColumns() {
      const baseColumns = [
        { dataIndex: 'order_id', label: '序号', slots: true, config: { width: 100 }},
        { dataIndex: 'file_name', label: '文件名', slots: true, config: { align: 'left' }},
        { dataIndex: 'table_type_str', label: '附件类型', config: { width: 150 }},
        { dataIndex: 'created_at', label: '上传时间', config: { width: 300 }}
      ]
      if (!this.isView) {
        baseColumns.push({ dataIndex: 'oper', label: '操作', slots: true })
      }
      return baseColumns
    }
  },
  watch: {
    fId(val) {
      if (val) {
        this.$set(this.searchForm, 'f_id', val)
        this.handleActionGetTable()
      } else {
        this.dataSource = []
      }
    }
  },
  methods: {
    downFile,
    handleActionGetTable() {
      this.$set(this.searchForm, 'f_table', this.fTable)
      if (this.fTable && this.searchForm.f_id) {
        this.handleGetTable()
      }
    },
    // 上传成功
    handleActionUploadSuccess(succVal) {
      const { response, name } = succVal
      post('api/adminPortal/enclosure/create', { ...this.searchForm, file_name: response.data, name })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('上传成功')
            this.handleGetTable()
          }
        }).finally(() => {
          this.$refs['wx-upload-button'].uploadFinsh = true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .file-names {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .table-wrapper {
    ::v-deep .table-box {
      padding: 0;
      border: none;
    }
  }
</style>
